<template>
  <div class="yongshuiliang2">
    <div class="one">
      <div id="chart2"><img src="@/assets/images/实时测点.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">实时测点</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          realPointCount
        }}</span>
        个
      </div>
    </div>
    <div class="one" style="cursor: pointer;" @click="yongshuiFn">
      <div id="chart22"><img src="@/assets/images/涌水预警.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">涌水预警</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          gushingAlarmCount
        }}</span>
        条
      </div>
    </div>
    <div class="one" style="cursor: pointer;" @click="jiangshuiFn">
      <div id="chart222"><img src="@/assets/images/降水预警.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">降水预警</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          rainAlarmCount
        }}</span>
        条
      </div>
    </div>
    <!-- 涌水预警 -->
    <el-dialog class="yongshuiDialog"
    :visible.sync="dialogVisible"
    width="95%"
    v-draggable
    :before-close="closeDialog">
    <span slot="title" style="font-size: 16px">
       涌水预警
      </span>
      <div v-if="dialogVisible">
        <yongshuiList></yongshuiList>
      </div>
    </el-dialog>
     <!-- 降水预警 -->
     <el-dialog class="jiangshuiDialog"
    :visible.sync="dialogVisible2"
    width="95%"
    v-draggable
    :before-close="closeDialog2">
    <span slot="title" style="font-size: 16px">
      降水预警
      </span>
      <div v-if="dialogVisible2">
        <jiangshuiList></jiangshuiList>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
import yongshuiList from "./components/yongshuiList"
import jiangshuiList from "./components/jiangshuiList"
export default {
  components: {
    yongshuiList,jiangshuiList
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      myChart2: null,
      myChart22: null,
      myChart222: null,
      realPointCount: 0,
      gushingAlarmCount: 0,
      rainAlarmCount: 0,
    };
  },
  methods: {
    yongshuiFn(){//涌水预警
      this.dialogVisible = true;
    },
    closeDialog() {
      setTimeout(() => {
        let target = document.querySelector(".yongshuiDialog .el-dialog");
        target.style.left = "";
        target.style.top = "";
        // target.style.marginTop = '0vh';
        // target.style.width = "95%";
      }, 500);
      this.dialogVisible = false;
    },
    jiangshuiFn(){//降水预警
      this.dialogVisible2 = true;
    },
    closeDialog2() {
      setTimeout(() => {
        let target = document.querySelector(".jiangshuiDialog .el-dialog");
        target.style.left = "";
        target.style.top = "";
        // target.style.marginTop = '0vh';
        target.style.width = "95%";
      }, 500);
      this.dialogVisible2 = false;
    },
    echartsFn2(val) {
      const typeList = ["实时测点", "实时测点"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart2.setOption(option);
    },
    echartsFn22(val) {
      const typeList = ["涌水预警", "涌水预警"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart22.setOption(option);
    },
    echartsFn222(val) {
      const typeList = ["降水预警", "降水预警"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart222.setOption(option);
    },
    getList() {
      axios.get("/dataview/hydrology/getWaterCount", {}).then((res) => {
        // this.echartsFn2(res.data.realPointCount); //实时测点
        // this.echartsFn22(res.data.gushingAlarmCount); //涌水预警
        // this.echartsFn222(res.data.rainAlarmCount); //降水预警
        this.realPointCount = res.data.realPointCount;
        this.gushingAlarmCount = res.data.gushingAlarmCount;
        this.rainAlarmCount = res.data.rainAlarmCount;
      });
    },
  },
  mounted() {
    this.getList();
    // this.myChart2 = echarts.init(document.getElementById("chart2"));
    // this.myChart22 = echarts.init(document.getElementById("chart22"));
    // this.myChart222 = echarts.init(document.getElementById("chart222"));
    // // this.echartsFn2();
    // // this.echartsFn22();
    // // this.echartsFn222();

    // // 为窗口的resize事件绑定事件处理函数
    // window.addEventListener("resize", () => {
    //   this.myChart2.resize();
    //   this.myChart22.resize();
    //   this.myChart222.resize();
    // });
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    // this.myChart2.clear(); //销毁
    // this.myChart22.clear(); //销毁
    // this.myChart222.clear(); //销毁
  },
};
</script>
<style scoped lang="scss">
.yongshuiliang2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .one {
    margin-top: 60px;
    width: 100%;
    height: 100%;
    text-align: center;
    #chart2,
    #chart22,
    #chart222 {
      width: 98%;
      // height: 240px;
      height: 120px;
    }
    .txt {
      // color: #8495a9;
      color: #fff;
      margin: 10px 0;
      position: relative;
      .txtSon {
        position: absolute;
        left: 48%;
        top: -50%;
        transform: translate(-50%);
      }
    }
    .txtSon2 {
      width: 80px;
      margin-left: 52%;
      text-align: left;
      transform: translate(-50%);
      background: linear-gradient(
        90deg,
        rgba(14, 69, 140, 0) 0%,
        rgba(14, 69, 140, 0.45) 100%
      );
    }
  }
}
</style>
